<script lang="ts">
import { computed, defineComponent, type PropType } from "vue";

import FormPicker from "@/components/form/picker.vue";

export default defineComponent({
  components: { FormPicker },
  props: {
    model: { type: Object, required: true },
    typeList: { type: Array as PropType<any[]>, required: true },
    keyList: {
      type: Array as PropType<string[]>,
      default: ["name", "phone", "card_type", "card_no"],
    },
  },
  setup(props) {
    const typeIndex = computed({
      get() {
        return props.typeList.findIndex(
          (i) => i.id === props.model[props.keyList[2]]
        );
      },
      set(index) {
        props.model[props.keyList[2]] = props.typeList[index]?.id;
      },
    });

    return { typeIndex };
  },
});
</script>

<template>
  <view class="form-card">
    <view class="form-card-item">
      <view class="form-card-label">
        姓名<text style="color: #ff4d42">*</text>
      </view>
      <input
        class="form-card-input"
        v-model="model[keyList[0]]"
        placeholder="请填写姓名"
      />
    </view>
    <view class="form-card-line"></view>
    <view class="form-card-item">
      <view class="form-card-label">
        手机号<text style="color: #ff4d42">*</text>
      </view>
      <input
        class="form-card-input"
        v-model="model[keyList[1]]"
        type="number"
        :maxlength="11"
        placeholder="请填写手机号"
      />
    </view>
    <view class="form-card-line"></view>
    <view class="form-card-item">
      <FormPicker v-model="typeIndex" :range="typeList" rangeKey="name">
        <view class="form-card-label">
          <view style="display: flex; align-items: center">
            {{ typeList.length === 0 ? "" : typeList[typeIndex].name }}&nbsp;
            <image
              class="form-card-arrow"
              src="@/package/activity/static/dypt-order-arrow.png"
            />
          </view>
        </view>
      </FormPicker>
      <input
        class="form-card-input"
        v-model="model[keyList[3]]"
        :maxlength="18"
        placeholder="请填写证件号码"
      />
    </view>
  </view>
</template>

<style lang="scss">
.form-card {
  .form-card-item {
    display: flex;
    align-items: center;
    height: 98rpx;
  }

  .form-card-label {
    flex-shrink: 0;
    width: 170rpx;
    font-size: 28rpx;
    color: #333333;
    line-height: 40rpx;
  }

  .form-card-input {
    flex-grow: 1;
    min-width: 0;
    font-size: 28rpx;
    color: #333333;
  }

  .form-card-line {
    border-bottom: 2rpx solid #eeeeee;
  }

  .form-card-arrow {
    width: 24rpx;
    height: 24rpx;
    transform: rotate(90deg);
  }
}
</style>